<template>
	<div style="margin-top: 10px"></div>
	<s-table
		ref="table"
		:columns="columns"
		:data="loadDataB"
		:alert="false"
		:tool-config="toolConfig"
		bordered
		:row-key="(record) => record.id"
	>
		<template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
			<div style="padding: 8px">
				<a-input
					ref="searchInput"
					:placeholder="`请输入${column.title}`"
					:value="selectedKeys[0]"
					style="width: 188px; margin-bottom: 8px; display: block"
					@change="(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])"
					@pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
				/>
				<a-button
					type="primary"
					size="small"
					style="width: 90px; margin-right: 8px"
					@click="handleSearch(selectedKeys, confirm, column.dataIndex)"
				>
					<template #icon><SearchOutlined /></template>
					查询
				</a-button>
				<a-button size="small" style="width: 90px" @click="handleReset(clearFilters)"> 重置 </a-button>
			</div>
		</template>
		<template #customFilterIcon="{ filtered }">
			<search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
		</template>
		<template #bodyCell="{ column, record }">
			<span v-if="searchText && searchedColumn === column.dataIndex">
				<template
					v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
				>
					<mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">
						{{ fragment }}
					</mark>
					<template v-else>{{ fragment }}</template>
				</template>
			</span>
			<template v-if="column.dataIndex === 'avatar'">
				<a-avatar :src="record.avatar" style="width: 25px; height: 25px" />
			</template>
			<template v-if="column.dataIndex === 'tokenNumber'">
				{{ record.tokenSignList.length }}
			</template>
			<template v-if="column.dataIndex === 'onlineStatus'">
				<a-tag v-if="record.onlineStatus === 'ONLINE'" color="green">
					{{ $TOOL.dictTypeData('ONLINE_STATUS', record.onlineStatus) }}
				</a-tag>
				<a-tag v-if="record.onlineStatus === 'OFFLINE'" color="grey">
					{{ $TOOL.dictTypeData('ONLINE_STATUS', record.onlineStatus) }}
				</a-tag>
			</template>
			<template v-if="column.dataIndex === 'action'">
				<a @click="tokenInfoList.onOpen(record.id, record.tokenSignList, 'B')">令牌列表</a>
				<a-divider type="vertical" />
				<a-space>
					<a-popconfirm title="确定要强退此用户吗？" @confirm="bExit(record)">
						<a-button type="link" danger size="small">强退</a-button>
					</a-popconfirm>
				</a-space>
			</template>
		</template>
	</s-table>
	<token-info-list ref="tokenInfoList" @successful="table.refresh()" />
</template>

<script setup name="monitorBTab">
	import monitorApi from '@/api/auth/monitorApi'
	import TokenInfoList from './tokenInfoList.vue'
	const table = ref(null)
	const tokenInfoList = ref()
	let searchFormState = reactive({})
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '头像',
			dataIndex: 'avatar',
			width: 60
		},
		{
			title: '账号',
			dataIndex: 'account',
			customFilterDropdown: true
		},
		{
			title: '姓名',
			dataIndex: 'name',
			ellipsis: true,
			customFilterDropdown: true
		},
		{
			title: '在线状态',
			dataIndex: 'onlineStatus'
		},
		{
			title: '最后登录IP',
			dataIndex: 'latestLoginIp',
			ellipsis: true,
			customFilterDropdown: true
		},
		{
			title: '最后登录地点',
			dataIndex: 'latestLoginAddress',
			ellipsis: true
		},
		{
			title: '最后登录时间',
			dataIndex: 'latestLoginTime',
			ellipsis: true
		},

		{
			title: '令牌数',
			dataIndex: 'tokenNumber',
			width: 70
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: '150px',
			scopedSlots: { customRender: 'action' }
		}
	]
	// 列表数据
	const loadDataB = (parameter) => {
		return monitorApi.monitorBPage(Object.assign(parameter, searchFormState)).then((res) => {
			return res
		})
	}
	// 强退B端session
	const bExit = (record) => {
		let params = {
			id: record.id
		}

		monitorApi.monitorBExit(params).then(() => {
			table.value.refresh(true)
		})
	}

	//查询
	const handleSearch = (selectedKeys, confirm, dataIndex) => {
		confirm()
		searchFormState[dataIndex] = selectedKeys[0]
		table.value.refresh()
	}

	const handleReset = (clearFilters) => {
		clearFilters({ confirm: true })
	}
</script>

<style scoped>
	.table-wrapper {
		margin-top: -16px !important;
	}
</style>
